﻿@{	
	Layout = "~/Views/Shared/_Layout.cshtml";
}
@section head{
	<script language="javascript" type="text/javascript">

		$(document).ready(function () {
			$('#myDataTable').dataTable().makeEditable({

				"aoColumns": [
                    {
                    //Empty object is used default editable settings
                   },
                    null, //null for read-only columns
                    {
                    indicator: 'Saving...',
                    tooltip: 'Click to select town',
                    loadtext: 'loading...',
                    type: 'select',
                    onblur: 'submit',
                    data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn','Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian','West Sussex':'West Sussex','Lanarkshire':'Lanarkshire','Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
                   }


                ]

			});
		});
        
	</script>
}
<div id="demo">
	<h2>Individual column editing - Example</h2>
	<p>In this example each column has a different editing rule. First column uses default editing using text box, second column is read-only, and third column uses select list for the inline editing</p>
	<table id="myDataTable" class="display">
		<thead>
			<tr>
				<th>Company name</th>
				<th>Address</th>
				<th>Town</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var item in Model)
   {
				<tr id="@item.ID">
					<td>@item.Name</td>
					<td>@item.Address</td>
					<td>@item.Town</td>
				</tr>
   }
		</tbody>
	</table>
</div>
<div class="add_delete_toolbar"></div>
<form id="formAddNewRow" action="#" title="Add new company">
	<label class="name">Name</label><input type="text" name="name" id="name" class="required" rel="0" />
	<br />
	<label class="name">Address</label><input type="text" name="address" id="address" rel="1" />
	<br />
	<label class="name">Postcode</label><input type="text" name="postcode" id="postcode" />
	<br />
	<label class="name">Town</label><select name="town" id="town" rel="2">
		<option value="London">London</option>
		<option value="Kent">Kent</option>
		<option value="Portsmouth">Portsmouth</option>
	</select>
	<br />
	<label class="name">Country</label><select name="country" id="country">
		<option value="1">Serbia</option>
		<option value="2">France</option>
		<option value="3">Italy</option>
	</select>
	<br />
</form>
